<template>
  <div style="width:980px;margin:0 auto;">
    <el-popover
      style="width:300px;height:700px;"
      ref="companyInfo"
      placement="bottom-start"
      trigger="hover">
      <div>
        <iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0" src="https://wapbaike.baidu.com/item/%E5%A4%A7%E5%AE%87%E5%AE%99%E4%BF%A1%E6%81%AF%E5%88%9B%E9%80%A0%EF%BC%88%E4%B8%AD%E5%9B%BD%EF%BC%89%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/19094826?fr=aladdin" ></iframe>
      </div>
    </el-popover>
    <el-row>
      <el-col :span="8">
        <h1>蒋圳</h1>
        Vue工程师/PHP工程师
        <br>
        <b>博客：</b>
        <el-button
          style="padding: 5px 0px 5px 0px"
          type="text"
          onClick="window.open('http://blog.csdn.net/zjiang1994')">
          http://blog.csdn.net/zjiang1994
        </el-button>
        <br>
        <b>作品：</b>
        <el-button
          style="padding: 5px 0px 5px 0px"
          type="text"
          onClick="window.open('http://clew123.xyz')">
          http://clew123.xyz
        </el-button>
      </el-col>
      <el-col :span="8">
        <h3>联系方式</h3>
        <span class="el-icon-phone"></span>&nbsp;&nbsp;&nbsp;&nbsp;17695795579
        <br>
        <b>邮箱:</b>&nbsp;&nbsp;jiangzhen@clew123.xyz
        <br>
        <b>QQ:</b>&nbsp;&nbsp;623056206
        <br>
        <el-popover
          ref="authorInfo"
          placement="bottom-start"
          trigger="hover">
          <div>
            欢迎加微信:
            <br>
            <img
              style="width:150px;"
              src="/static/img/wx.png"
              alt="微信"/>
          </div>
        </el-popover>
        <div v-popover:authorInfo><b>微信:</b>&nbsp;&nbsp;zjiang1_12</div>
      </el-col>
      <el-col :span="8">
        <h3>基本信息:</h3>
        <b>性别：</b>男
        <br>
        <b>出生年月：</b>1994.1
        <br>
        <b>籍贯：</b>吉林
        <br>
        <b>现居地：</b>天津
        <br>
        <b>工作年限</b>1.5
        <br>
      </el-col>
    </el-row>
    <hr style="color:#eeeeee;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>技术栈</span>
      </div>
      <el-row>
        <el-col :span="12">
          <h4>主要技能熟练度：</h4>
          <el-row>
            <el-col :span="3">PHP：</el-col>
            <el-col :span="8">
              <el-rate
                v-model="php"
                void-color="#409EFF"
                disabled>
              </el-rate>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">Vue.js：</el-col>
            <el-col :span="8">
              <el-rate
                v-model="vue"
                void-color="#409EFF"
                disabled>
              </el-rate>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">Python：</el-col>
            <el-col :span="8">
              <el-rate
                v-model="python"
                void-color="#409EFF"
                disabled>
              </el-rate>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <h4>其他技术：</h4>
          <el-tag size="small" disable-transitions>JavaScript</el-tag>
          <el-tag size="small" disable-transitions>HTML</el-tag>
          <el-tag size="small" disable-transitions>CSS</el-tag>
          <el-tag size="small" disable-transitions>Bootstrap</el-tag>
          <br>
          <el-tag size="small" disable-transitions>webapp</el-tag>
          <el-tag size="small" disable-transitions>Cordova</el-tag>
          <el-tag size="small" disable-transitions>Vue全家桶</el-tag>
          <el-tag size="small" disable-transitions>ECharts</el-tag>
          <h4>工具：</h4>
          <el-tag size="small" disable-transitions>Git</el-tag>
          <el-tag size="small" disable-transitions>SVN</el-tag>
          <el-tag size="small" disable-transitions>Node.js</el-tag>
          <el-tag size="small" disable-transitions>Markdown</el-tag>

        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">
        <span>教育经历</span>
      </div>
      <el-row>
        <el-col :span="8">
          <b>毕业院校：</b>
          <el-button
            style="padding: 5px 0px 5px 0px"
            type="text"
            onClick="window.open('https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E6%B0%91%E8%88%AA%E5%A4%A7%E5%AD%A6/7639900')">
            中国民航大学
          </el-button>
          <br>
          <b>专业：</b>电子信息工程（自动控制）
          <br>
          <b>学历：</b>全日制本科
          <br>
          <b>入学时间：</b>2012.9
          <br>
          <b>毕业时间：</b>2016.6
        </el-col>
        <el-col :span="8">
          <b>学历认证：</b>
          <el-button
            style="padding: 5px 0px 5px 0px"
            type="text"
            onClick="window.open('http://www.chsi.com.cn/xlcx/bg.do?vcode=083205592614')">
            学信网学历认证
          </el-button>
          <br>
          <img style="width:100px;height:100px;" src="/static/img/xxrz.png" alt="学信网学历认证">
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">
        工作经历
      </div>
      <el-button
        style="padding: 5px 0px 5px 0px;font-size:18px"
        type="text"
        onClick="window.open('http://www.trans-cosmos.com.cn/jp/')"
        v-popover:companyInfo>
        大宇宙信息创造（中国）有限公司
      </el-button>
      2016年8月-至今
      <br>
      <b>角色：</b>web工程师
      <br>
      <b>技术：</b>
      <el-tag>Vue.js</el-tag>
      <el-tag>PHP</el-tag>
      <el-tag>HTML</el-tag>
      <el-tag>javascript</el-tag>
      <br>
      <b>主要工作：</b>
      <el-tag>web开发</el-tag>
      <el-tag>webapp开发</el-tag>
    </el-card>
    <el-card>
      <div slot="header">
        项目经验：
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <div slot="title">
            <span>日本JTEKT公司能力统计APP</span>
            <span style="float:right;margin-right:50px;">
              <el-tag>webapp</el-tag>
              <el-tag>Vue.js</el-tag>
              <el-tag>Cordova</el-tag>
            </span>
          </div>
          <ul>
            <li>项目概述：</li>
            日本JTEKT公司为了拓展互联网业务，委托我公司制作一款跨平台webAPP，实现对工人工作情况的记录，分析和展示。
            <li>使用技术</li>
            客户端：Cordova+Vue.js；<br>
            服务端：JAVA；<br>
            数据库：SQL Server；
            <li>本人角色：</li>
              主任工程师（keyman）
            <li>负责工作：</li>
            负责客户端的设计与开发
            <ol>
              <li>参与程序设计。理解客户需求，设计实现方式。</li>
              <li>项目架构搭建。给项目组搭建cordova与vue.js结合的开发环境，实现cordova与vue.js的联动。</li>
              <li>相关技术选型。挑选、安装相关插件（库），并编写相关demo供其他成员参考。</li>
              <li>编写核心代码。包括但不限于：核心业务组件的编写、共通组件的编写、cordova插件在vue.js中的使用。</li>
              <li>前端技术培训。对项目组成员进行vue.js、cordova等相关技术的讲解与培训。</li>
              <li>代码review。负责review客户端的所有代码，指导开发人员进行开发，指出不足与错误。</li>
            </ol>
            <li>项目收获：</li>
              <ol>
                <li>参与了小型团队的管理，对项目管理有了新的认识。</li>
                <li>参与了设计，在和前辈的讨论中学习到很多设计理念。</li>
                <li>通过搭建客户端架构，学习了很多新的知识（webapp）</li>
                <li>通过对组员的培训和代码编写，加深了技术（主要是vue.js）的熟练度。</li>
                <li>基本上完整的体验了软件开发从0到1的过程，对项目开发流程有了一定的理解。</li>
              </ol>
          </ul>
        </el-collapse-item>
        <el-collapse-item name="2">
          <div slot="title">
            <span>日本東建集团整骨院频道项目</span>
            <span style="float:right;margin-right:50px;">
              <el-tag>Python</el-tag>
              <el-tag>Scrapy</el-tag>
              <el-tag>selenium</el-tag>
            </span>
          </div>
          <ul>
            <li>项目概述：</li>
            项目主要是为日本东建责任有限公司，整骨院频道做网站开发。
            <li>使用技术：</li>
            python+Scrapy+selenium
            <li>本人角色：</li>
            测试工程师（自动化）
            <li>负责工作：</li>
            主要进行测试相关工作，主要是进行数据抓取。
            进行数据抓取的主要原因是，我们需要数据进行测试，但是日本方面对数据比较敏感，不提供数据，所以没办法只能从老版网站上面抓取数据。
            <ol>
              <li>主要工作是编写爬虫进行数据抓取。</li>
              <li>对抓取的数据进行格式加工。</li>
              <li>指导测试人员使用抓取到的数据。</li>
              <li>测试case做成。</li>
            </ol>
            <li>项目收获：</li>
            <ol>
              <li>坚定了技术代替人力的思想。</li>
              <li>明确了自我学习的意识。</li>
              <li>实践了python爬虫技术，提高了python技术。</li>
            </ol>
          </ul>
        </el-collapse-item>
        <el-collapse-item name="3">
          <div slot="title">
            <span>日本乐天系网站QA组</span>
            <span style="float:right;margin-right:50px;">
              <el-tag>测试</el-tag>
            </span>
          </div>
          <ul>
            <li>项目概述：</li>
            日本乐天系网站的测试工作，包括但不限于：
            <el-button
              type="text"
              onClick="window.open('https://www.rakuten.co.jp/')">
              楽天市場
            </el-button>、
            <el-button
              type="text"
              onClick="window.open('https://gora.golf.rakuten.co.jp/')">
              Rakuten GORA
            </el-button>、
            <el-button
              type="text"
              onClick="window.open('https://energy.rakuten.co.jp/')">
              Rakuten Energy
            </el-button>、
            <el-button
              type="text"
              onClick="window.open('https://beauty.rakuten.co.jp/')">
              Rakuten Beauty
            </el-button>
            <li>使用技术：</li>
            测试
            <li>本人角色：</li>
            测试工程师
            <li>负责工作：</li>
            <ol>
              <li>根据分配的任务编写测试文档。</li>
              <li>根据测试文档制作测试数据。</li>
              <li>根据测试文档进行测试。</li>
            </ol>
            <li>项目收获：</li>
            <ol>
              <li>对大型网站的前结构有了感性的认识。</li>
              <li>加深了对测试工作的了解，积累了测试经验。</li>
            </ol>
          </ul>
        </el-collapse-item>
        <el-collapse-item name="4">
          <div slot="title">
            <span>乐天GORA开发项目</span>
            <span style="float:right;margin-right:50px;">
              <el-tag>PHP</el-tag>
              <el-tag>JavaScript</el-tag>
              <el-tag>HTML</el-tag>
            </span>
          </div>
          <ul>
            <li>项目概述：</li>
            日本乐天GORA网站开发，乐天GORA是乐天旗下大型高尔夫预约。
            <li>使用技术：</li>
            <ul>
              <li>后台： PHP</li>
              <li>数据库： MySQL</li>
              <li>前台： Smarty+HTML+JavaScript+CSS</li>
            </ul>
            <li>本人角色：</li>
            web工程师（PHP）
            <li>负责工作：</li>
            <ul>
              <li>调查bug原因和修正方法。</li>
              <li>进行PHP编码，实现业务。</li>
              <li>编写测试case。</li>
              <li>测试代码。</li>
            </ul>
            <li>项目收获：</li>
            <ul>
              <li>学习了网站的基础知识，对网站开发有了感性认识。</li>
              <li>学会使用相关工具（svn、git等等）。</li>
              <li>强化了PHP、JS等相关能力。</li>
              <li>明确了web开发过程中的相关流程。</li>
            </ul>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>
<script>

export default {
  data () {
    return {
      php: 3.5,
      vue: 4,
      python: 3,
      activeNames: "1"
    }
  },
  methods: {
  }
}
</script>
<style scoped>
</style>

